<script setup>
import { computed, onMounted, ref } from "vue";
import { queryJobCountApi } from "@/api/report";

const positionList = ref([]);

const optionPositionData = computed(() => {
  return {
    xAxis: {
      type: "category",
      data: positionList.value.jobList,
    },
    yAxis: {
      type: "value",
      min: 0,
      interval: 1,
    },
    series: [
      {
        data: positionList.value.dataList,
        type: "bar",
        itemStyle: {
          color: "#00CED1",
        },
      },
    ],
  };
});
const queryPositionCountData = async () => {
  try {
    const res = await queryJobCountApi();
    if (res.code === 200) {
      positionList.value = res.data;
      console.log(positionList.value);
    } else {
      ElMessage.error("获取员工职位统计数据失败：" + res.msg);
    }
  } catch (error) {
    ElMessage.error("获取员工职位统计数据时发生错误：" + error.message);
  }
};

onMounted(() => {
  queryPositionCountData();
});
</script>

<template>
  <div class="position-stat">
    <h3>员工职位统计</h3>
    <e-charts class="employeePositionData" :option="optionPositionData" />
  </div>
</template>

<style scoped>
.position-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 24px;
}
h3 {
  margin-bottom: 10px;
}
.employeePositionData {
  height: 400px;
}
</style>
